<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('修改书籍')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <th:block th:insert="~{include :: select2-css}" />
    <style>
        .binding-input span{
            margin: 0 5px;
            color: #5bc0de;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-3">
    <!-- Main content -->
    <div class="card mt-2">
        <div class="card-header border-0">
            <h3 class="card-title" th:text="${book.id > 0?'修改书籍':'添加书籍'}"></h3>
            <div class="card-tools"></div>
        </div>
        <div class="card-body">
    <form class="form-horizontal m" id="form-book-edit" th:object="${book}">
        <input id="teacherIdArr" name="teacherIdArr"  type="hidden"/>
        <input id="bookId" name="id" th:field="*{id}" type="hidden">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">分类</label>
            <div class="col-sm-2">
                <div class="input-group">
                    <input id="categoryId" name="categoryId" type="hidden" th:value="*{categoryId}"/>
                    <input class="form-control" type="text" id="categoryName" readonly="readonly" th:value="*{categoryName}">
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">标题</label>
            <div class="col-sm-6">
                <input id="title" name="title" th:field="*{title}" class="form-control" type="text" placeholder="请输入书籍标题" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">出版社</label>
            <div class="col-sm-3">
                <input id="publisher" name="publisher" th:value="*{publisher}" class="form-control" placeholder="请输入书籍出版社" type="text" required>
            </div>
            <div class="form-text binding-input">
                <span onclick="$('#publisher').val('华中科技大学出版社')">华中科技大学出版社</span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">主编</label>
            <div class="col-sm-6">
                <select id="teacherIds" class="form-control text-blue" multiple>
                    <option th:each="dict:${teacherList}" th:value="${dict.id}" th:text="${dict.name}+' ('+${dict.mobile}+')'"></option>
                </select>
            </div>
            <span class="form-text" style="color: red">提示：主编可以选择多个</span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">简介</label>
            <div class="col-sm-6">
                <textarea id="intro" name="intro" th:text="*{intro}" style="min-height: 100px" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">封面</label>
            <div class="col-sm-4">
                <input id="cover" name="cover" th:value="*{cover}"  class="form-control" type="text">
            </div>
            <div class="col-sm-5">
                <label for="cover-upload" class="btn btn-danger"><i class="fa fa-image"></i> 上传图像</label>
                <label class="btn btn-default" id="view-cover"><i class="fa fa-image"></i> 预览</label>
                <input type="file" onchange="ImgUpdate()" style="display: none" value="" name="cover-upload" id="cover-upload" accept="image/*"/>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">详情</label>
            <div class="col-sm-9">
                <input id="context" th:value="*{context}" name="context" type="hidden">
                <div id="editor" class="summernote" th:utext="*{context}"></div>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">ISBN</label>
            <div class="col-sm-2">
                <input name="isbn" th:value="*{isbn}" class="form-control" placeholder="请输入ISBN书号" type="text">
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">装帧</label>
            <div class="col-sm-2">
                <input id="binding" name="binding"  th:value="*{binding}" class="form-control" placeholder="请输入书籍装帧" type="text">
            </div>
            <div class="form-text binding-input">
                <span onclick="$('#binding').val('平装')">平装</span>
                <span onclick="$('#binding').val('精装')">精装</span>
            </div>
        </div>
        <div class="form-group row" >
            <label class="col-sm-2 col-form-label is-required text-sm-right">页数</label>
            <div class="col-sm-2">
                <input name="pages" th:value="*{pages}" class="form-control" value="0" placeholder="请输入书籍页数" type="text">
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">出版日期</label>
            <div class="col-sm-2">
                <input name="publishDate" th:value="*{publishDate}" class="form-control" placeholder="请选择出版日期" type="text">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">售价</label>
            <div class="col-sm-2">
                <input name="price" th:value="*{price/100.0}" class="form-control" value="0"  type="text" required>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">原价</label>
            <div class="col-sm-2">
                <input name="sourcePrice" th:value="*{sourcePrice/100.0}" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
            <div class="col-sm-2 pt-2">
                <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="*{isElite==1}"> 推荐</label>
                &nbsp;&nbsp;&nbsp;
                <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="*{isTop==1}"> 固顶</label>
            </div>
            <label class="col-sm-2 col-form-label text-sm-right">关联课程</label>
            <div class="col-sm-2">
                <input name="courseId" th:value="*{courseId}" class="form-control" placeholder="请输入关联课程id" type="text">
            </div>
            <span class="form-text">注：对应同步课程Id（可选）</span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">销售量</label>
            <div class="col-sm-2">
                <input name="buyCount" th:value="*{buyCount}" class="form-control" value="0" type="text" required>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">浏览量</label>
            <div class="col-sm-2">
                <input name="viewCount" th:value="*{viewCount}" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="row">
            <label class="col-sm-2"></label>
            <div class="col-sm-10">
                <button type="button" class="btn btn-primary" onclick="submitSave()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<th:block th:insert="~{include :: select2-js}" />
<script th:inline="javascript">
    var prefix = "/book";
    var channelId = [[${book.channelId}]];

    $(function() {
        var arr = JSON.parse('[[${teacherIds}]]');
        $('#teacherIds').val(arr).trigger("change").select2({
            placeholder: "请选择主讲教师",
            allowClear: true
        });
        $("#form-book-add").validate({
            focusCleanup: true
        });
        $("input[name='publishDate']").datetimepicker({
            format: 'Y-m-d',
            yearStart: 2010, //设置最小年份
            yearEnd: 2025, //设置最大年份
            timepicker: false,
            lang: "en", //语言选择中文
        });
        $('.summernote').summernote({
            placeholder: '请输入详细介绍',
            height: 192,
            lang: 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        /*分类-新增-选择父部门树*/
        $('#categoryName').click(function () {
            var options = {
                title: null,
                width: "380px",
                url: "/category/select.html?categoryId=" + $("#categoryId").val() + "&channelId=" + channelId,
                callBack: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    setCategory(body.find('#categoryId').val(), body.find('#categoryName').val())
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        });

        $('#view-cover').click(function () {
            var imgSrc = $('#cover').val();
            if (imgSrc.length < 1) {
                layer.msg('图片地址不存在！');
            } else {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    title: false,
                    area: ['60%', '500px'],
                    content: '<img src="' + imgSrc + '" />'
                });
            }
        });
    });

    function setCategory(id, name) {
        $("#categoryId").val(id);
        $("#categoryName").val(name);
    }

    //图片上传
    function ImgUpdate() {
        var file = $('#cover-upload')[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "/upload/temp/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (result) {
                if (result.code === 0) {
                    $("#cover").val(result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                } else {
                    window.layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }
    //var content = $("#context").val();
    //$('#editor').summernote('code', content);
    // 富文本上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    //修改保存
    function submitSave() {
        var sHTML = $('.summernote').summernote('code');
        $("#context").val(sHTML);
        var ids = $.form.selectSelects("teacherIds");
        $("#teacherIdArr").val(ids);
        var categoryId = $('#categoryId').val();
        if (categoryId === '' || categoryId === '0') {
            return layer.msg('请先选择所属分类！', {icon: 2});
        }
        if ($('#title').val().length < 3) {
            return layer.msg('请输入标题，且必需大于3个字符！', {icon: 2});
        }
        if ($('#publisher').val().length < 3) {
            return layer.msg('请输入出版社名称，且必需大于3个字符！', {icon: 2});
        }
        if ($('#intro').val().length < 5) {
            return layer.msg('请输入简介，且必需大于5个字符！', {icon: 2});
        }
        $.modal.loading();
        var data = $("#form-book-edit").serializeArray();
        $.post(prefix + "/save.json", data, function (result) {
            if (result.code === 0) {
                $.operate.successTabCallback(result);
            } else {
                $.modal.msgError(result.msg);
            }
        });

    }
</script>
</body>
</html>